<template>
  <el-dialog
    title="查看记录"
    :visible.sync="dialogVisible"
    width="1000px"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        label="扣款记录"
        name="deduct"
      >
        <el-table
          :data="tableData"
          border
        >
          <el-table-column
            align="center"
            label="期数"
            width="70"
          >
            <template slot-scope="scope">
              <span>第{{scope.row.which_period}}期</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="租期"
          >
            <template slot-scope="scope">
              <span>{{scope.row.begin_time}}至{{scope.row.end_time}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="金额"
            prop="rent"
          ></el-table-column>
          <el-table-column
            align="center"
            label="支付状态"
            prop="lease_status"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="扣款时间"
            prop="create_time"
          ></el-table-column>
          <el-table-column
            align="center"
            label="支付流水号"
            prop="trade_no"
          ></el-table-column>
          <el-table-column
            align="center"
            label="扣款状态"
          >
            <template slot-scope="scope">
              <span>扣款{{scope.row.status}}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="原因"
            width="180"
            prop="failReason"
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作内容"
            width="120"
            prop="pay_type"
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作人"
            prop="username"
          ></el-table-column>
        </el-table>
        <custom-page
          ref="customPage"
          :total="total"
          @getList="getDeduct"
        ></custom-page>
      </el-tab-pane>
      <el-tab-pane
        label="操作记录"
        name="operate"
      >
        <el-table
          :data="tableData"
          border
        >
          <el-table-column
            align="center"
            label="操作内容"
            prop="content"
          ></el-table-column>
          <el-table-column
            align="center"
            label="操作人"
            prop="operate_user"
          >
          </el-table-column>
          <el-table-column
            align="center"
            label="操作时间"
            prop="create_time"
          ></el-table-column>
        </el-table>
        <custom-page
          ref="customPage"
          :total="total"
          @getList="getDeduct"
        ></custom-page>
      </el-tab-pane>
    </el-tabs>
    <div
      slot="footer"
      class="dialog-footer"
    >
      <el-button
        type="primary"
        @click="dialogVisible=false"
      >关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { leaseWithholdLog, getOrderLog } from "@/api/finance";
import customPage from "@/components/customPage";
export default {
  components: { customPage },
  props: ['orderNo', 'leaseId', 'orderId'],
  data() {
    return {
      activeName: 'deduct',
      dialogVisible: false,
      tableData: [],
      total: 0
    }
  },
  methods: {
    handleClick(tab){
      this.activeName = tab.name
      this.getDeduct();
    },
    getDeduct() {
      const { page, pageSize } = this.$refs.customPage;
      let pageInfo ={
        page,pageSize
      }
      if(this.activeName == 'deduct'){
        leaseWithholdLog({
          orderNo: this.orderNo,
          leaseId: this.leaseId,
          ...pageInfo
        }).then(res => {
          this.tableData = res.data || [];
          this.total = res.total || 0;
        })
      } else {
        this.tableData = []
        getOrderLog({
          order_id: this.orderId,
          ...pageInfo
        }).then(res => {
          this.tableData = res.data || [];
          this.total = res.total || 0;
        })
      }
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.$nextTick(() => {
          this.getDeduct();
        })
        this.activeName = 'deduct'
      }
    }
  }
}
</script>

<style>
</style>